import React from 'react';
import { Button, Checkbox, Form, type FormProps, Input } from 'antd';
import axios from 'axios';
type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
};
interface AxiosResponse<T = any> {
    data: T;
    status: number;
    statusText: string;
    headers: any;
    config: AxiosRequestConfig;
    request?: any;
}
interface AxiosError<T = any> extends Error {
    config: AxiosRequestConfig;
    code?: string;
    request?: any;
    response?: AxiosResponse<T>;
    isAxiosError: boolean;
    toJSON: () => object;
}

const onFinish: FormProps<FieldType>["onFinish"] = (values: any) => {
    console.log('Success:', values);
    try {
        axios.get<string[]>('/api/data')
            .then((response: AxiosResponse<string[]>) => {
                console.log(response.data);
            })
            .catch((error: AxiosError) => {
                console.error('Error fetching data:', error);
            });


    } catch (error) {
        console.error('Error fetching data:', error);
    }
};

const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo: any) => {
    console.log('Failed:', errorInfo);


};

export default function home() {
    return (
        <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
        >
            <Form.Item<FieldType>
                label="Username"
                name="username"
                rules={[{ required: true, message: 'Please input your username!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item<FieldType>
                label="Password"
                name="password"
                rules={[{ required: true, message: 'Please input your password!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item<FieldType>
                name="remember"
                valuePropName="checked"
                wrapperCol={{ offset: 8, span: 16 }}
            >
                <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    )
}


